<template>
    <h1>Hello</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>性别：{{ gender }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">显示电话</button>
</template>

<script lang="ts">
    export default {
        name :"Person",
        // data() {
        //     return {
        //         name:"张三",
        //         gender:"男",
        //         age:23,
        //         tel:13344556677
        //     }
        // },
        // methods:{
        //     changeName:function() {
        //         this.name = '李四'
        //     },
        //     changeAge() {
        //         this.age += 1;
        //     },
        //     showTel() {
        //         alert(this.tel)
        //     }
        // },
        setup() {
            let name = '张三'
            let age = 20
            let gender = '男'
            let tel = '12345678'
            function changeName() {
                name = '李四'
            }
            function changeAge() {
                age += 1;
            }
            function showTel() {
                alert(tel)
            }

            return {name, age, gender, changeName, changeAge, showTel}
            // return ()=>'你好啊'

        }
        
    }
        
</script>

